<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="20" :offset="3" style="width:75%">
            <el-tabs v-model="activeName">
              <el-tab-pane label="本科专业" name="first" >
                <ul class="navbar">
                  <li class="nav-item"><a class="nav-link" href="#zhexue">哲学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#yixue">医学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#guanlixue">管理学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#yishuxue">艺术学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#jingjixue">经济学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#faxue">法学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#jiaoyuxue">教育学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#wenxue">文学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#lishixue">历史学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#lixue">理学</a></li>
                  <li class="nav-item"><a class="nav-link" href="#gongxue">工学</a></li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="专科专业" name="second">
                <ul class="navbar">
                  <li class="nav-item"><a class="nav-link" href="#">第一个专科专业</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">第二个专科专业</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">第三个专科专业</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">第四个专科专业</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">第五个专科专业</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">第六个专科专业</a></li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="zhexue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>哲学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>哲学类</h4>
                <el-divider></el-divider>
                <a class="a" @click="find('哲学')">哲学</a>
                <a class="a">逻辑学</a>
                <a class="a">宗教学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="yixue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>医学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>基础医学类</h4>
                <el-divider></el-divider>
                <a class="a">基础医学</a><a class="a">生物学</a><a class="a">生物医学科学</a>
              </el-card>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>临床医学类</h4>
                <el-divider></el-divider>
                <a class="a" @click="find('临床医学')">临床医学</a>
                <a class="a">麻醉学</a><a class="a">医学影像学</a><a class="a">眼视光医学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="guanlixue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>管理学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>工商管理类</h4>
                <el-divider></el-divider>
                <a class="a">工商管理学</a><a class="a">市场营销</a><a class="a">审计学</a>
              </el-card>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>管理科学与工程类</h4>
                <el-divider></el-divider>
                <a class="a">管理科学</a><a class="a" @click="find('工程管理')">工程管理</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="yishuxue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>艺术学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>艺术学理论类</h4>
                <el-divider></el-divider>
                <a class="a"  @click="find('艺术史论')">艺术史论</a>
              </el-card>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>美术学类</h4>
                <el-divider></el-divider>
                <a class="a">美术学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="jingjixue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>经济学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>经济学类</h4>
                <el-divider></el-divider>
                <a class="a" @click="find('经济学')">经济学</a>
              </el-card>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>财政学类</h4>
                <el-divider></el-divider>
                <a class="a">财政学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="faxue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>法学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>法学类</h4>
                <el-divider></el-divider>
                <a class="a"  @click="find('法学')">法学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="jiaoyuxue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>教育学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>教育学类</h4>
                <el-divider></el-divider>
                <a class="a" @click="find('教育学')">教育学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="wenxue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>文学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>中国语言文学类</h4>
                <el-divider></el-divider>
                <a class="a"  @click="find('汉语言文学')">汉语言文学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="lishixue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>历史学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>历史学类</h4>
                <el-divider></el-divider>
                <a class="a"  @click="find('历史学')">历史学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="lixue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>理学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>物理学类</h4>
                <el-divider></el-divider>
                <a class="a" @click="find('物理学')">物理学</a>
              </el-card>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" class="major">
            <a name="gongxue"></a>
            <el-card style="padding-bottom: 20px;width: 90%">
              <h3>工学</h3>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>计算机类</h4>
                <el-divider></el-divider>
                <a class="a" @click="find('计算机科学与技术')">计算机科学与技术</a>
                <a class="a" @click="find('软件工程')">软件工程</a>
                <a class="a" @click="find('网络工程')">网络工程</a>
              </el-card>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>土木类</h4>
                <el-divider></el-divider>
                <a class="a" @click="find('土木工程')">土木工程</a>
                <a class="a">城市地下空间工程</a>
              </el-card>
              <el-divider></el-divider>
              <el-card shadow="hover">
                <h4>建筑类</h4>
                <el-divider></el-divider>
                <a class="a">建筑学</a><a class="a">城乡规划</a>
              </el-card>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    export default {
        name: "Majors",
        components:{Header,Footer},
        data(){
            return{
                activeName:"first"
            }
        },
        methods:{
            find(majorName){
                this.$router.push({
                    path: '/major/'+majorName
                });
            }
        }
    }
</script>

<style scoped>
  .el-main{
    margin-top: 70px;
  }

  .navbar ul {
    list-style: none;
  }
  .navbar li {
    display: block;
    float: left;
  }
  .a{
    margin-right: 30px;
    text-decoration: none;
    cursor:pointer;
    color: #0c0c0c;
  }
  .major{
    margin-bottom: 20px;
  }
  /deep/.el-tabs__item {
    font-size: 18px !important;
  }
</style>
